import React, { useState, useEffect, useMemo, useRef, ElementRef } from 'react';
import { useToggle, useSize } from '@umijs/hooks';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { connect } from 'dva';
import { Menu, Button } from 'antd';
import styles from './globalHeader.less';
import LogoSvg from '../../images/logo';
import BellSvg from '../../images/bell';
import MessageSvg from '../../images/message';
import SerachInput from '../serachInput';
import NotificationsMenu from '../pushNotifications';
import { useClickAway, useScroll } from '@umijs/hooks';
import { GlobalState, UmiComponentProps } from '@/common/type';
function mapStateToProps(_: GlobalState) {
  return { global: _.global, loading: _.loading };
}

type PageStateProps = ReturnType<typeof mapStateToProps>;

const GlobalHeader: React.FC<PageStateProps & UmiComponentProps> = props => {
  const { global, loading, dispatch } = props;
  const [selectCurrent, setSlectCurrent] = useState<string>('homePage');
  const [floatingShowFlag, setFloatingShowFlag] = useState<boolean>(false);
  const serachFoucus1 = useToggle<boolean, boolean>(false, true);
  const serachFoucus2 = useToggle<boolean, boolean>(false, true);
  const serachButton1ClassName = useMemo(() => {
    return serachFoucus1.state ? styles['SearchBar-hiddenAskButton'] : '';
  }, [serachFoucus1.state]);

  const [scroll] = useScroll(document);
  const savedScrollTopPosition = useRef(0);
  useEffect(() => {
    if (scroll.top) {
      if (scroll.top > savedScrollTopPosition.current) {
        dispatch({ type: 'global/toggleShowFlag', payload: { flag: false } });
      } else {
        dispatch({ type: 'global/toggleShowFlag', payload: { flag: true } });
      }
      savedScrollTopPosition.current = scroll.top;
    }
  }, [dispatch, scroll]);

  function getPushNotifications() {
    if (floatingShowFlag) {
      return <NotificationsMenu></NotificationsMenu>;
    } else {
      return null;
    }
  }

  const floating = useClickAway(() => {
    setFloatingShowFlag(false);
  });

  return (
    <div className={styles.headerContainer}>
      <div className={styles.headerWrap}>
        <div className={styles.headerWrapHidden}>
          <div
            className={`${global.headerShowFlag ? '' : styles.hideappHeader} ${styles.trans} ${
              styles.appHeader
            }`}
          >
            <div className={styles.logoStyle}>
              <a href="">
                <LogoSvg />
              </a>
            </div>
            <div className={styles['heade-menu']}>
              <Menu selectedKeys={[selectCurrent]} mode="horizontal">
                <Menu.Item key="homePage" onClick={() => setSlectCurrent('homePage')}>
                  <FormattedMessage id="homePage" />
                </Menu.Item>
                <Menu.Item key="find" onClick={() => setSlectCurrent('find')}>
                  <FormattedMessage id="find" />
                </Menu.Item>
                <Menu.Item key="waitingAnswer">
                  <FormattedMessage id="waitingAnswer" />
                </Menu.Item>
              </Menu>
            </div>
            <div className="flex">
              <div className={styles.serachWrap}>
                <div className="left">
                  <SerachInput
                    onFocus={(e: boolean) => {
                      serachFoucus1.toggle(e);
                    }}
                    onBlur={(e: boolean) => {
                      serachFoucus1.toggle(e);
                    }}
                  ></SerachInput>
                </div>
              </div>
              <button className={` ${styles.quizBtn} ${serachButton1ClassName} `}>
                <FormattedMessage id="quiz" />
              </button>
            </div>
            <div className={`${styles['header-userInfo']} ${styles['header-svg-align']}`}>
              <div
                className={styles['AppHeader-notifications']}
                onClick={() => {
                  setFloatingShowFlag(true);
                }}
              >
                <BellSvg></BellSvg>
              </div>
              <div className={`${styles['AppHeader-messages']} ${styles['header-svg-align']}`}>
                <MessageSvg></MessageSvg>
              </div>
              <div>
                <img
                  className={styles['AppHeader-profileAvatar']}
                  src={require('../../images/user.jpg')}
                  alt=""
                />
              </div>
            </div>
          </div>
          <div
            className={`${global.headerShowFlag ? '' : styles.showPageHeader} ${styles.trans} ${
              styles.pageHeader
            }`}
          >
            <div className={`flex ${styles.header_2_wrap}`}>
              <div className={`flex ${styles.header_2_left}`}>
                <div className={styles.logoStyle}>
                  <a href="">
                    <LogoSvg />
                  </a>
                </div>
                <div className={styles['heade-menu']}>
                  <Menu selectedKeys={[selectCurrent]} mode="horizontal">
                    <Menu.Item key="recommend">
                      <FormattedMessage id="recommend" />
                    </Menu.Item>
                    <Menu.Item key="attention">
                      <FormattedMessage id="attention" />
                    </Menu.Item>
                    <Menu.Item key="hotList">
                      <FormattedMessage id="hotList" />
                    </Menu.Item>
                  </Menu>
                </div>
              </div>
              <div className="flex" style={{ width: '296px' }}>
                <div>
                  <div className="left">
                    <SerachInput
                      onFocus={(e: boolean) => {
                        serachFoucus2.toggle(e);
                      }}
                      onBlur={(e: boolean) => {
                        serachFoucus2.toggle(e);
                      }}
                      styles={{ width: '216px' }}
                    ></SerachInput>
                  </div>
                </div>
                <button className={` ${styles.quizBtn} `}>
                  <FormattedMessage id="quiz" />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div ref={floating}>{getPushNotifications()}</div>
      </div>
    </div>
  );
};

export default connect(mapStateToProps)(GlobalHeader);
